import { createApp, h } from 'vue'
import LoadingComponent from './Loading.vue'
import { Loading } from 'vant'

const $loading = (isVisible: boolean, title = '加载中...', color = '#c9c9c9', isBottomMask = false) => {
  if (!isVisible) {
    const customShowLoading = document.getElementById('customShowLoading')
    if (!customShowLoading) return
    // 销毁元素
    // app.unmount(customShowLoading)
    document.body.removeChild(customShowLoading)
    return
  }

  const loadingList = { title, color, isBottomMask }
  // 创建
  const app = createApp({
    render() {
      return h(LoadingComponent, { loadingList })
    }
  })
  app.component(Loading.name, Loading)
  // 容器挂载
  const divEle = document.createElement('div')
  divEle.setAttribute('id', 'customShowLoading')
  // 让我们节点挂载到一个dom元素上
  document.body.appendChild(divEle)
  app.mount(divEle)
}

export default $loading
